<template>
  <div ref="mark" class="mark">
    <div v-for="item in groupList" :key="item.GroupId">
      <h4>
        {{ item.GroupName }}
      </h4>
      <ul class="oul">
        <li 
            @touchstart="touchstart"
            @touchmove.stop="touchmove"
            @touchend="touchend(items.SerialID)"
            v-for="items in item.GroupList"
            :key="items.SerialID">
          <img :src="items.Picture" alt="" />
          <div>
            <p>
              {{ items.AliasName }}
            </p>
            <p>
                <span>
                    {{ items.DealerPrice }}
                </span>
            </p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: ["groupList"],
  data() {
      return {
          moveInfo: {
            //  按下的位置
            prevPos: "",
            //  当前的位置
            curPos: "",
            // 是否长按
            fals:true,
          },
          // 控制斜滑动开关，
            noo:true
      }
  },
  methods: {
      // 按下   
      touchstart({ touches }) {
        // 保存按下的位置 
        this.moveInfo.prevPos = touches[0]
      },
      // 移动 
      touchmove({ touches }) {
          // 保存移动的位置
          this.moveInfo.curPos = touches[0]
          let delXWidth = this.moveInfo.curPos.pageX - this.moveInfo.prevPos.pageX
          let delYHight = this.moveInfo.curPos.pageY - this.moveInfo.prevPos.pageY
          this.moveInfo.fals=false
          if (Math.abs(delXWidth)< Math.abs(delYHight)) {
            this.noo=false
          }

          // 如果 delXWidth<0不移动
          if (delXWidth < 0 ) {
              delXWidth = 0
              return
          }

          // 设置mark的位置
          if(this.noo){
            this.$refs.mark.style.transform = `translateX(${delXWidth}px)`     
          }     
      },
      // 抬起   
      touchend(id) {
        //如果初始的X轴位置改变则进入判断
         if(this.noo || !(this.$refs.mark.style.transform=`translateX(0px)`)){
          // 如果移动的位置超过屏幕的三分之一        
          // 移动的位置 
          let moveWith = this.moveInfo.curPos.pageX - this.moveInfo.prevPos.pageX
          if (moveWith > window.innerWidth * 0.3) {
              this.$emit('close', false)
          } else {
            this.$refs.mark.style.transform=`translateX(0px)`//回到初始位置
          }
        }
          this.noo=true
          //跳转详情
        if(this.moveInfo.fals){
          this.$router.push('/details/'+id)
        }
         this.moveInfo.fals=true
      }
  }
};
</script>

<style lang="scss" scoped>
.mark {
  width: 70%;
  height: 100%;
  position: fixed;
  right: 0;
  top: 0;
  overflow: scroll;
  background: #fff;
  animation: slidein 1s linear;
  h4 {
    height: 17px;
    color: #666;
    font-size: 14px;
    background: #f4f4f4;
    padding-left: 15px;
    line-height: 19px;
    margin: 0;
  }
  .oul {
    li {
      display: flex;
      img {
        width: 90px;
        height: 60px;
      }
      > div {
          height: 100%;
          padding-left: 10px;
          padding-bottom: 10px;
        p {
          font-size: 17px;
          color: #5f687a;
          margin: 0;
          padding-top: 8px;
          span {
              color: orangered;
              font-size: 14px;
          }
        }
      }
    }
  }
}

@keyframes slidein {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
    // transform: 
  }
}
</style>